import React, { useState } from "react";

export const Count = () => {
    const [count, setCount] = useState(0)
    // 这里是状态改变完才进行执行  执行顺序3
    console.log(count,'---1');
        
    const add=()=>{
        //  set是异步的，后面这段log先打印，状态才改变 执行顺序2
        setCount(count + 1)
        // 执行顺序 1
        console.log(count,'---2');
        
    }
    return (<>
        <div>{count}</div>
        <button onClick={add}>+</button>
    </>)

}



export const DateCom = () => {
    const [date] = useState(() => {
        let date = new Date()
        return { year: date.getFullYear(), month:date.getMonth()+1,day:date.getDay()}
    })
    return (<>
    <p>{date.year}年</p>
    <p>{date.month}月</p>
    <p>{date.day}日</p>
    </>)
}



export const UserInfo=()=>{
    const[user,setUser]=useState({name:'坤坤',age:'18'})

 
    console.log(user);
    
    const change=()=>{
         user.name='花花'
    user.age='15'
    console.log(user);
    
        setUser({...user})
    }
    return (<>
    <h1>姓名：{user.name}</h1>
    <h1>年龄：{user.age}</h1>
    <button onClick={change}>改变</button>
    </>)
}